<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title>客房情况</title>
    <link href="css/main.css" rel="stylesheet" type="text/css">
    <link href="bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<div class="tabe_div" >
    <p class="p_line text_ient"><a class="find_a">商品名称：</a><input v-model="sreachname" type="text" class="form_input text_ient" placeholder="输入名称"/>
        <el-button type="primary" @click="handleCurrentChange(1)">查询</el-button>
    <p>
    <div>
        <el-table ref="adminTable"
                       :data="page"
                       style="width: 100%;"
                      >
        <el-table-column label="编号" width="100" align="center">
            <template slot-scope="scope">{{scope.row.pmsGoods.id}}</template>
        </el-table-column>
        <el-table-column label="订单用户名" align="center">
            <template slot-scope="scope">{{scope.row.pmsGoods.name}}</template>
        </el-table-column>
        <el-table-column label="商品主图" width="160" align="center">
                <template slot-scope="scope">
                   <span> <img style="width: 100px;height: 100px;" :src="scope.row.pmsGoods.image"></span>
                </template>
        </el-table-column>
        <el-table-column label="商品数量" width="160" align="center">
                <template slot-scope="scope">{{scope.row.count}}</template>
        </el-table-column>
        <el-table-column label="商品积分" width="160" align="center">
            <template slot-scope="scope">{{scope.row.pmsGoods.points}}</template>
        </el-table-column>
        <el-table-column label="商品价格" width="160" align="center">
                <template slot-scope="scope">{{scope.row.pmsGoods.price}}</template>
        </el-table-column>
        <el-table-column label="商品优惠价格" width="160" align="center">
                <template slot-scope="scope">{{scope.row.pmsGoods.discountPrice}}</template>
        </el-table-column>
        <el-table-column label="商品总价" width="160" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.pmsGoods.discountPrice!=''">
                        {{scope.row.pmsGoods.discountPrice*scope.row.count}}</span>
                    <span v-if="scope.row.pmsGoods.discountPrice==''">
                        {{scope.row.pmsGoods.price*scope.row.count}}</span>
                </template>
        </el-table-column>
    </el-table>
    </div>
</div>
<el-pagination
        background
        style="position: absolute;bottom: 0px"
        @current-change="handleCurrentChange"
        layout="total,prev, pager, next"
        :current-page.sync="pageNum"
        :page-size="pageSize"
        :total="total">
</el-pagination>
</div>
<script>
    function extracted() {
        var url = window.location.href;
        url=url.split("?")[1];
        var paraments = url.split("&");
        var arr = []; //声明一个空数组 用于存放参数对象
        for (var i = 0; i < paraments.length; i++) {
            let newParaments = decodeURI(paraments[i]);
            let arrObj = newParaments.split("=");
            let obj = {};
            for (var j = 0; j < arrObj.length; j++) {
                var key = arrObj[0];
                var value = arrObj[1];
                obj[key] = value;
            }
            arr.push(obj);
        }
        return arr[0].id;
    }
    var v=new Vue({
        el:"#app",
        data:{
            sreachname:"",
            pageNum:1,
            pageSize:"5",
            total:"",
            page:[],
            orderid:""
        },
        created() {
            this.orderid=extracted();
            this.handleCurrentChange();
        },
        methods:{
            handleCurrentChange(val){
                let params=new URLSearchParams();
                params.append("pageNum",val==null?this.pageNum:val);
                params.append("pageSize",this.pageSize);
                params.append("sreachname",this.sreachname);
                params.append("orderid",this.orderid);
                axios.post("cs-manage/omsOrder/listGoods",params).then(res=>{
                    this.page=res.data.data.records;
                    this.total=res.data.data.total;
                });
            },
        }

    })
</script>
</body>
</html>
